<template>
	<view class="container">
		<u-sticky>
			<view class="search-box flex-x-bet-y-center">
				<view class="flex-1">
					<InputSearch :inputVal="keyword" :customStyle="{margin: '0', flex: '1'}"
						@searchConfirm="searchInputConfirm"></InputSearch>
				</view>
			</view>
		</u-sticky>
		
		<view class="sort-wrapper">
			<view class="sort-item flex-xy-center" v-for="(item, index) in sortList" :key="item" @tap="toggleSort(item)">
				<image :src="item.selectIcon" class="icon-sort" v-if="item.value === currentSort" mode=""></image>
				<image :src="item.icon" class="icon-sort" v-else mode=""></image>
				<text :class="{active: queryParams.sort === item.value}">{{item.label}}</text>
			</view>
		</view>
		
		<view class="store-list">
			<view class="store-info flex-y-center" v-for="(item, index) in listData" :key="item.id" @tap="$myUni.navTo('/pages/merchant/detail?id=' + item.id)">
				<image :src="item.cover | formatFile" mode="" class="store-avatar"></image>
				<view class="right-info">
					<view class="store-name">{{item.firmName}}</view>
					<view class="gray-text">{{item.mainBusiness}}</view>
					<view class="gray-text">{{item.province}}{{item.city}}{{item.area}}</view>
				</view>
			</view>
		</view>

		<u-loadmore :status="loadingStatus" font-size="28" icon-size="30"></u-loadmore>
	</view>

</template>

<script>
	import InputSearch from '@/components/InputSearch/index.vue'
	import { storeRanking } from '@/api/store.js'
	export default {
		components: {
			InputSearch,
		},
		data() {
			return {
				queryParams:{
					keyWord: '',
					pageNo: 1,
					pageSize: 10,
					sort: ''   //  1新晋榜
				},
				listData: [],
				total: 0,
				loadingStatus: 'loading',
				sortList:[
					{
						icon: './static/images/icon-ranking-10.png',
						selectIcon: './static/images/icon-ranking-11.png',
						label: '优质榜',
						value: 3
					},
					{
						icon: './static/images/icon-ranking-20.png',
						selectIcon: './static/images/icon-ranking-21.png',
						label: '热度榜',
						value: 2
					},{
						icon: './static/images/icon-ranking-30.png',
						selectIcon: './static/images/icon-ranking-31.png',
						label: '新晋榜',
						value: 1
					}
				]
			};
		},
		onLoad(options) {
			this.storeRanking()
		},
		onReachBottom(){
			if(this.total > this.listData.length){
				this.queryParams.pageNo++
				this.storeRanking()
			}
		},
		methods: {
			searchInputConfirm(value) {
				this.queryParams.keyWord = value
				this.initQuery()
			},
			toggleSort(item){
				this.queryParams.sort = item.value
				this.initQuery()
			},
			initQuery(){
				this.queryParams.pageNo = 1
				this.listData = []
				this.total = 0
				this.storeRanking()
			},
			storeRanking(){
				this.loadingStatus = 'loading'
				storeRanking(this.queryParams).then(res => {
					res.result.records.forEach(item => {
						item.cover = item.firmImgs ? item.firmImgs.split(',')[0] : ''
					})
					this.listData.push(...res.result.records)
					this.total = res.result.total
					this.loadingStatus = this.total > this.listData.length ? 'loadmore' : 'nomore'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-top: 0;
	}

	.search-box {
		display: flex;
		background-color: #fff;
		padding: 30rpx;
		position: relative;
		z-index: 99;

		.filter-type {
			margin-right: 20rpx;
			width: 170rpx;
		}
	}
	
	.sort-wrapper{
		display: flex;
		background: #fff;
		padding: 0 30rpx 30rpx;
		
		.sort-item{
			flex:1;
			
			.icon-sort{
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
			
			text{
				font-weight: normal;
				font-size: 29rpx;
				color: #666666;
			}
			
			.active{
				color: $theme-color;
			}
		}
	}
	
	.store-list{
		margin: 30rpx;
		
		.store-info{
			background: #FFFFFF;
			border-radius: 19rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			
			.store-avatar{
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				flex-shrink: 0;
			}
			
			.right-info{
				flex:1;
				margin-left: 30rpx;
				
				.store-name{
					font-size: 33rpx;
					color: #333333;
					font-weight: 500;
				}
				
				.gray-text{
					font-size: 27rpx;
					color: #808080;
					padding-top: 10rpx;
				}
			}
		}
	}
</style>